<template>
	<view class="todo-list">
		<view class="todo-task-list" style="width: 90%;">
			<view class="simple-card todo-list-card" style="display: flex;justify-content: space-between;">
				<view>
					<view class="simple-header" style="width: 100%">
						<view class="simple-title" style="width: 100%">
							<view class="simple-status" style="min-width: .75rem">
								<u-tag text="" color="#fff" border-color="rgb(30,233,181)" size="mini"
									bg-color="rgb(30,233,181)">
								</u-tag>
							</view>
							<view class="simple-title-text">
								<span>{{ obj.nodeName }}</span>
							</view>
						</view>
					</view>
					<view class="simple-card-content" style="margin-top: 20rpx;">巡检点：{{ obj.siteName }}</view>
					<view class="simple-card-content" style="margin-top: 20rpx;">巡检对象：{{ obj.deviceName }}</view>
				</view>
				
				<u-icon name="map" size="50" @click="getGis"></u-icon>
			</view>
		</view>

		<view class="todo-task-list" style="width: 90%;margin-top: 50rpx;">
			<view class="simple-card todo-list-card" v-for="(item,index) in taskList" :key="index"
				style="padding: 10rpx;">
				<view class="title-map">
					<u-icon name="map"></u-icon>{{ item.taskName }}
				</view>
				<view class="simple-card-content" style="margin-top: 20rpx;">
					{{ item.taskDetail ? item.taskDetail : '' }}
				</view>
				<view class="simple-card-content" style="margin-top: 20rpx;display: flex;align-items: center;">
					<view>记录：</view>
					<view v-if="item.replyType == 2">
						<input :value="form.length > 0 ? form[index].replyDetail : value"
							style="border: 1px solid #ccc;" type="text" :border="true" placeholder="请输入记录值"
							@input="(val)=>change(val,form[index])" />
					</view>
					<view v-if="item.replyType == 3">
						<u-number-box :value="form.length > 0 ? Number(form[index].replyDetail) : valueNumber"
							@change="(val)=>changeNum(val,form[index])"></u-number-box>
					</view>
					<view v-if="item.replyType == 1">
						<u-input :value="form.length > 0 ? form[index].replyDetail : value"
							style="border: 1px solid #ccc;" type="select" :border="true" placeholder="请选择记录值"
							@click="changeSelect(form[index])" />
						<u-select v-model="showSelect" :list="form[index].replyOptionListVo" valueName="value"
							labelName="label" @confirm="(val)=>confirmSelelct(val,form[index])"></u-select>
					</view>
				</view>
				<view v-if="form.length > 0 && form[index].taskRecordFileList.length > 0"
					class="form-item-appendix-list" style="margin-top: 20rpx;">
					<view v-for="appendixItem in form[index].taskRecordFileList" :key="appendixItem.id"
						class="form-item-appendix-item">
						<view class="appendix-item-left">
							<u-icon name="file-text"></u-icon>
							<span style="margin-left: 0.5rem">{{appendixItem["filename"]}}</span>
						</view>
						<view class="appendix-item-right">
							<u-icon class="action-delete-appendix" name="clear"
								@click="removeRecordFile(appendixItem)" />
						</view>
					</view>
				</view>
				<view style="width: 100%;margin-top: 20rpx;">
					<view class="button-text" @click="onUpload(form[index])">
						<u-icon style="color: rgb(0, 88, 254);" name="file-text"></u-icon>
						<view style="color: rgb(0, 88, 254);">上传附件/文件</view>
					</view>
				</view>
			</view>
		</view>
		<l-file ref="lFile" @up-success="handleFileSuccess"></l-file>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import selelctAddress from '../../components/selelctAddress'
	import {
		taskTypeColor,
		taskTypeOptions,
		plan
	} from "../../constants/taskConstant";
	export default {
		components: {
			selelctAddress
		},
		data() {
			return {
				listSelect: [],
				showSelect: false,
				valueNumber: 0,
				value: "",
				content: "完成盘点",
				showCheck: false,
				screeningForm: {},
				creator: {},
				showPopupOfHandleUserNameCascades: false,
				typeShow: false,
				showScreen: false,
				name: "",
				typeName: "",
				cmdbtype: "",
				siteId: "",
				siteName: "",
				typeId: "",
				type: "0",
				cmdId: "",
				upladObj: {},
				options1: [{
						label: '未盘点',
						value: 0,
					},
					{
						label: '已盘点',
						value: 1,
					}
				],
				options2: [{
						label: '安全层',
						value: 1,
					},
					{
						label: '物理层',
						value: 2,
					},
				],
				form: [],
				list: [],
				obj: {},
				id: "",
				taskTodoList: [],
				taskList: [],
				workOrderTodoList: [],
				todoType: " 任务",
				taskTypeColor: [],
				plan: [],
				taskTypeOptions: [],
				nodeInstanceList: [],
			}
		},
		onLoad(val) {
			this.id = val.id
			this.getList()
		},
		mounted() {
			this.taskTypeColor = taskTypeColor;
			this.taskTypeOptions = taskTypeOptions;
			this.plan = plan
		},
		methods: {
			getList() {
				this.$request('', '/offlineInspection/offlineInstance/selectTaskInfos?nodeId=' + this.id, 'get', {}, {}, )
					.then(res => {
						this.cmdId = res.data.deviceId
						this.taskList = res.data.taskList
						this.obj = res.data;
						for (let i = 0; i < res.data.taskList.length; i++) {
							var upladObj = []
							if (res.data.taskList[i].replyList && res.data.taskList[i].replyList.length > 0) {
								if (res.data.taskList[i].replyList[0].attachmentList) {
									for (let k in res.data.taskList[i].replyList[0].attachmentList) {
										upladObj.push({
											attachmentId: res.data.taskList[i].replyList[0].attachmentList[k]
												.id,
											filename: res.data.taskList[i].replyList[0].attachmentList[k].name,
										});
									}
								}
								this.form.push({
									taskId: res.data.taskList[i].id,
									nodeInstanceId: res.data.id,
									replyDetail: res.data.taskList[i].replyList[0].replyDetail,
									replyOptionListVo: res.data.taskList[i].replyOptionListVo ? res.data
										.taskList[i].replyOptionListVo : [],
									attachIdList: res.data.taskList[i].replyList[0].attachmentList ? res.data
										.taskList[i].replyList[0].attachmentList : [],
									taskRecordFileList: res.data.taskList[i].replyList[0].attachmentList ?
										upladObj : []
								})
							} else {
								this.form.push({
									taskId: res.data.taskList[i].id,
									nodeInstanceId: res.data.id,
									replyDetail: "",
									replyOptionListVo: res.data.taskList[i].replyOptionListVo ? res.data
										.taskList[i].replyOptionListVo : [],
									attachIdList: [],
									taskRecordFileList: []
								})
							}
						}
						console.log(this.form)
					})
			},
			change(val, obj) {
				obj.replyDetail = val.detail.value
				this.changeType(obj)
			},
			changeNum(val, obj) {
				obj.replyDetail = val.value
				this.changeType(obj)
			},
			changeSelect(val, obj) {
				this.showSelect = true
				console.log(val)
			},
			confirmSelelct(val,obj) {
				obj.replyDetail = val[0].value
				this.changeType(obj)
			},
			/* 上传 */
			onUpload(val) {
				console.log(val)
				if (val.replyDetail === '' ) {
					this.$refs.uToast.show({
						title: '请先填写内容',
						type: 'error'
					})
					return;
				}
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: "http://all.roywise.cn:8081/api" + "/system/attachment/attachment/upload",
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						'Authorization': uni.getStorageSync('token'),
					},
					module: "cmdb.resource",
					["data" + "id"]: "resource",
					single: false,
					filetypes: "",
				});
				this.upladObj = val
			},
			handleFileSuccess(response) {
				console.log(response)
				if (response.data.code === 200) {
					this.upladObj.attachIdList.push(response.data.data.id);
					this.upladObj.taskRecordFileList.push({
						attachmentId: response.data.data.id,
						filename: response.data.data.name,
					});
					this.changeType(this.upladObj)
				} else {
					this.$toast.fail("文件上传失败");
				}
			},
			lookpy() {
				uni.navigateTo({
					url: '/pages/Inventory/list?id=' + this.id
				})
			},
			closeAll() {
				this.showPopupOfHandleUserNameCascades = false
				this.typeShow = false
				this.showScreen = false
				this.showPopupOfHandleUserNameCascades = false
				this.typeShow = false
				this.showScreen = false
				this.name = ""
				this.typeName = ""
				this.cmdbtype = ""
				this.siteId = ""
				this.siteName = ""
				this.typeId = ""
				this.type = "0"
			},
			// 添加记录
			changeType(val) {
				this.$request('', '/offlineInspection/offlineTaskReply/add', 'post', val, {}, ).then(res => {
					this.getList()
				})
			},
			// 跳转gis
			getGis() {
				this.$request('', '/resourceCenter/cmdb/resource/getGisInfo', 'get', {
					id: this.cmdId
				}, {}, ).then(res => {
					uni.navigateTo({
						url: '/pages/gis/index?id=' + res.data.gisSmid + '&gisInfo=' + res.data.gisInfo
					})
				})
			},
			// 名字搜索
			onQuery() {
				this.$request('', '/offlineInspection/check/plan/info/' + this.id + '?status=' + this.type + '&name=' +
					this
					.name + '&siteId=' + this.siteId + "&typeId=" + this.typeId, 'get', {}, {}, ).then(
					res => {
						const {
							data
						} = res;
						// console.log(rows)
						this.list = data;
						this.closeAll()
					})
			},
			// 获取详情
			getPlanDateil() {
				this.$request('', '/offlineInspection/check/plan/checkInfo/' + this.id, 'get', {}, {}, ).then(
					res => {
						const {
							data
						} = res;
						// console.log(rows)
						this.obj = data;
					})
			},
			workTypeChange(val) {
				console.log(val)
				this.typeName = val[0].label
				this.type = val[0].value
			},
			// 地址选择
			cityChange(val) {
				console.log(val)
				this.siteName = val.province.siteName + '/' + val.city.siteName
				this.siteId = val.city.id
			},
			scanCode() {
				var that = this
				// var cmdbId = "095159d2-956b-4370-8377-74f96cdbcced"
				// console.log(cmdbId)
				// console.log(that.id)
				// uni.navigateTo({
				// 	url: '/pages/Inventory/cmdbDetail?checkId=' + "577d7c84eaae4ea48e97164a16bb639c" + '&id=' +
				// 		cmdbId
				// })
				uni.scanCode({
					onlyFromCamera: true,
					autoZoom: false,
					scanType: ['qrCode'],
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.$refs.uToast.show({
							title: '扫码成功',
							type: 'success'
						})
						var cmdbId = JSON.parse(res.result).objectId
						console.log(cmdbId)
						console.log(that.id)
						uni.navigateTo({
							url: '/pages/Inventory/cmdbDetail?checkId=' + that.id + '&id=' + cmdbId
						})
					}
				});


			},
			startCheck() {
				this.$request('', '/offlineInspection/check/plan/beginCheckPlan?checkId=' + this.obj.id, 'post', {}, {}, )
					.then(
						res => {
							this.getPlanDateil()
						})
			},
			confirm() {
				this.$request('', '/offlineInspection/check/plan/finishCheckPlan?checkId=' + this.obj.id, 'post', {}, {}, )
					.then(
						res => {
							this.$refs.uToast.show({
								title: '盘点结束',
								type: 'success'
							})
							this.showCheck = false
							uni.switchTab({
								url: '/pages/Inventory/index'
							})
						})
			},
			cancel() {
				this.showCheck = false
			},
			endCheck() {
				this.showCheck = true
			},
			// 查看盘点资产详情
			getCmdb(val) {
				uni.navigateTo({
					url: '/pages/Inventory/cmdb?id=' + val.id
				})
			},
			/**
			 * 处理时间
			 */
			parseTime(time, pattern) {
				if (arguments.length === 0 || !time) {
					return null;
				}
				const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
				let date;
				if (typeof time === "object") {
					date = time;
				} else {
					if (typeof time === "string" && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					} else if (typeof time === "string") {
						time = time
							.replace(new RegExp(/-/gm), "/")
							.replace("T", " ")
							.replace(new RegExp(/\.[\d]{3}/gm), "");
					}
					if (typeof time === "number" && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay(),
				};
				const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === "a") {
						return ["日", "一", "二", "三", "四", "五", "六"][value];
					}
					if (result.length > 0 && value < 10) {
						value = "0" + value;
					}
					return value || 0;
				});
				return time_str;
			}
		}
	}
</script>

<style lang="scss">
	.title-map {
		display: flex;
		align-items: center;
		width: 100%;
		background-color: rgb(0, 88, 254);
		height: 50rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.button-text {
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		border: #ccc dotted 1rpx;
		border-radius: 70rpx;
		font-size: 22rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.todo-list {
		overflow: scroll;
		background-color: #fff;
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.todo-list-card {
			+.todo-list-card {
				margin-top: 10rpx;
			}

			.simple-card-content {
				color: #aaaaaa;
			}
		}

		.card-list {
			border: 1px solid #ccc;
		}
	}

	.work-style {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}
</style>